<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> -->

<div id="content_work2">
      <!-- 컨텐츠 -->
      <div  style="height: auto; width: 500px; border:2px solid purple;">
    	<div id="map" style="width:500px;height:400px;"></div>
	<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=05390d7962d454261b1bda49132943d961c28edf">
</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
    center: new daum.maps.LatLng(37.402042, 127.106886), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

//마커를 표시할 위치입니다
var position =  new daum.maps.LatLng(37.402042, 127.106886);

//마커를 생성합니다
var marker = new daum.maps.Marker({
position: position
});

//마커를 지도에 표시합니다.
marker.setMap(map);

//마커에 커서가 오버됐을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">G.I.JOE로 오세요!!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new daum.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다

//인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({
position : iwPosition,
content : iwContent
});

//마커에 마우스오버 이벤트를 등록합니다
daum.maps.event.addListener(marker, 'mouseover', function() {
// 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
});

//마커에 마우스아웃 이벤트를 등록합니다
daum.maps.event.addListener(marker, 'mouseout', function() {
// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
infowindow.close();
});
</script>
      <!-- 컨텐츠 -->
    </div>
      <div><img src="images/menu_map.gif" border="0" alt="약도보기">
	</div>
	</div>
    
